<template>
    <div class="app-container">
      <!--工具栏-->
      <div class="head-container">
        <eHeader :permission="permission" />
        <crudOperation :permission="permission" :async="true">
        </crudOperation>
      </div>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" border :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column label="序号" width="50px" align="center" :resizable="false">
          <template slot-scope="scope" class = "display">
            <div>{{ scope.$index+(crud.currentPage - 1) * crud.pageLimit + 1 }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="enterpriseName" label="企业名称"  :resizable="false"/>
        <el-table-column prop="recruitPosition" label="岗位名称" width="105px" :resizable="false"/>
        <el-table-column prop="education" label="学历要求" width="125px" :resizable="false"/>
        <el-table-column prop="headcount" label="招聘人数" width="80px" :resizable="false"/>
        <el-table-column prop="salary" label="薪资待遇" :resizable="false">
          <template slot-scope="scope">
            <span>{{scope.row.salaryType}}</span>
            <span v-if="scope.row.salaryType=='年薪'||scope.row.salaryType=='月薪'"  :resizable="false">{{ scope.row.salary }}元</span>
          </template>
        </el-table-column>
        <el-table-column prop="salaryDesc" label="薪资说明"  :resizable="false"/>
        <el-table-column prop="accommodation" label="是否提供住宿"  :resizable="false">
          <template slot-scope="scope"  :resizable="false">
            <span v-if="scope.row.accommodation">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column prop="workMeal" label="是否提供工作餐" width="120px" :resizable="false">
          <template slot-scope="scope">
            <span v-if="scope.row.workMeal==true">是</span>
            <span v-if="scope.row.workMeal==false">否</span>
          </template>
        </el-table-column>
        <el-table-column prop="contact" label="联系人联系方式" width="120px" :resizable="false"/>
        <el-table-column prop="deadline" label="截止日期" />

        <!--   编辑与删除   -->
        <el-table-column
          label="操作"
          width="250px"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :permission="permission"
              async
            >
              <el-button slot="left" class="option-item" size="mini" type="primary" plain icon="el-icon-view"  title="查看"  @click="doView(scope.row.id)" />
            </udOperation>
          </template>
        </el-table-column>

      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </template>
  <script>
  import { mapGetters } from 'vuex'
  import crudRecruit from '@/api/business/recruit'
  import eHeader from './module/header'
  import CRUD, { presenter } from '@crud/crud'
  import crudOperation from '@crud/CRUD.operation'
  import pagination from '@crud/Pagination'
  import udOperation from '@crud/UD.operation'
  const addPageUrl = '/business/recruit/add';
  const editPageUrl = '/business/recruit/edit';
  export default {
    name: 'RecruitList',
  
    components: { eHeader, crudOperation, pagination, udOperation },
    cruds() {
      return CRUD({
        title: '就业服务',
        url: 'business/recruit/queryPage',
        crudMethod: { ...crudRecruit },
        addPage: true,
        addPageUrl: addPageUrl,
        editPage: true,
        editPageUrl: editPageUrl,
        editParams: ['id'],
        optShow: {
          add: true,
          edit: false,
          del: false,
          reset:true
        },
        query: {
          status:0
        }
      })
    },
  
    mixins: [presenter()],
    // 数据字典
  
    data() {
      return {
        permission: {
          add: [],
          edit: [],
          del: [],
          info: []
        },
        id: null,
        dialogFormVisible: false,
        form: {
          departmentId: null,
          id: null,
        },
        
      }
    },
  
    created() {
      console.log(this.permission, 'permission')
    },
  
    methods: {
      doView(id) {
        console.log(id, 'id')
        this.$router.push('/business/recruit/detail/' + id)
      },
      addPlan() {
        this.$router.push('/business/recruit/add')
      },
      onChangeStatus (record) {
        console.log('record : ', record)
        
      },
    },
    computed: {
      ...mapGetters([
        'user'
      ])
    },
  }
  </script>
  
  <style rel="stylesheet/scss" lang="scss" scoped>
   ::v-deep .el-input-number .el-input__inner {
      text-align: left;
    }
   ::v-deep .svg-icon {
     vertical-align: middle;
   }
   /* Tooltip 文本 */
   .tooltip .tooltiptext {
     visibility: hidden;
     width: 40px;
     background-color: #666;
     color: #fff;
     text-align: center;
     padding: 5px 0;
     border-radius: 6px;
  
     /* 定位 */
     position: absolute;
     z-index: 1;
     right: 28px;
     top: 0;
   }
  
   /* 鼠标移动上去后显示提示框 */
   .tooltip:hover .tooltiptext {
     visibility: visible;
   }
  </style>
  
<style>
  .el-table th.el-table__cell > .cell{
    text-align: center;
    color: black
  }
</style>